<template>
	<view>
		<view class="out-sort-box">
			<view class="flex-wrap sort-item">
				<block v-for="(item,index) in state">
					<view :class="index == stateIndex ? 'select-item-active' : ''"
						@click="selectState(index,item.state)">
						{{item.name}}
					</view>
				</block>
			</view>
			<!-- <view class="sort-time">
				<view class="sort-time-start">
					<view>开始时间</view>
					<picker mode="date" :value="start_date" :start="startDate" :end="endDate"
						@change="startDateChange">
						<view class="uni-input">{{start_date}}</view>
					</picker>
					<view class="reset-time-btn" @click="resetTime('start')">清空时间</view>
				</view>
				<view class="sort-time-end">
					<view>结束时间</view>
					<picker mode="date" :value="end_date" :start="startDate" :end="endDate"
						@change="endDateChange">
						<view class="uni-input">{{end_date}}</view>
					</picker>
					<view class="reset-time-btn" @click="resetTime('end')">清空时间</view>
				</view>
			</view>
			<view style="display: flex;justify-content: flex-end;">
				<view class="search-btn" @click='search'>搜索</view>
				<view class="sort-btn" @click='showSort'>按条件筛选</view>
			</view> -->
		</view>
		<view style="width: 100%;height: 140rpx;"></view>
		<view class="top-total-box">
			<text style="margin-right: 20rpx;">累计业绩：{{total_price || 0}} 元 ;</text>
			<text>累计积分：{{total_score || 0}} </text>
		</view>
		<view class="bd" v-if="listData.length>0">
			<block v-for="(item,index) in listData" v-key="id">
				<view class="item">
					<view class="item-l">
						<view class="type-txt"><text>申请类型：{{item.project.name || ''}}</text></view>
						<view class="type-txt">
							<text v-if="item.username">用户名：{{item.username || ''}}</text>
						</view>
						<view class="type-txt">
							<text>申请备注：{{item.content || ''}}</text>
						</view>
						<view class="type-txt">
							<text>可获积分：{{item.score || ''}}</text>
						</view>
						<view class="type-txt" v-if="item.remark">
							<text>审核备注：{{item.remark || ''}}</text>
						</view>
						<view class="type-txt">
							<text>审核状态：{{item.state | state2text}}</text>
						</view>
						<view class="time">{{item.created_at | time}}</view>
					</view>
					<view class="item-r" :class="item.price > 0 ? '' : ''">
						<view>{{item.price}}</view>
						<view class="pass" v-if="item.state != 1" @click="showExam(item,index)" >审批</view>
					</view>
				</view>
			</block>
			
		</view>
	
		<uni-load-more :status="loadStatus"></uni-load-more>
		<view v-if="show_sort">
			<view class="sort-box">
				<view style="display: flex;justify-content: space-between;
						padding: 20rpx;font-size: 30rpx;">
					<view>筛选条件</view>
					<view @click="closeSort">关闭</view>
				</view>
				<view class="search-box">
					<input class='search-input' placeholder-class="search-holder" placeholder='请输入用户名' v-model="param.name"
						@confirm='search'></input>
					<view class="search-btn" @click='search'>搜索</view>
				</view>
				<view class="sort-list">
					<view class="sort-title">状态</view>
					<view class="flex-wrap sort-item">
						<block v-for="(item,index) in sortStatus">
							<view :class="index==sort_status_index ? 'select-item-active' : ''"
								@click="selectSortItem('status',index,item.status)">
								{{item.name}}
							</view>
						</block>
					</view>
				</view>
				<view class="space-around sort-footer">
					<view class="reset-btn" @click="resetData">重置</view>
					<view class="submit-btn" @click="submitData">确定</view>
				</view>
			</view>
			<view class="maskLayer"></view>
		</view>
		<jhxPass ref="pass" @exam="exam"></jhxPass>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import jhxPass from "@/merchant/components/jhx-pass/jhx-pass.vue";
	import {
		orderLog
	} from '@/api/merchant/order.js';
	import moment from '@/utils/moment';
	export default {
		components: {
			uniLoadMore,
			jhxPass
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				page: 1,
				page_size:15,
				onLoading: false,
				nomore: false,
				listData: [],
				loadStatus: 'more',
				total_price: 0, //订餐总额
				total_num: 0, //订餐总数
				show_sort:false,
				start_date: currentDate,
				end_date: currentDate,
				
				stateIndex: 0,
				state: [{
						name: '全部',
						state: ''
					},
					{
						name: '待审',
						state: 0
					},
					{
						name: '已通过',
						state: 1
					},
					{
						name: '已驳回',
						state: 3
					},
				],
				param: {
					state: '',
					date: ''
				},
				index:''
			}
		},
		onLoad(options) {
			this.$data.type = options.type ? options.type : '';
			this._getData();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm')
			},
			timeOne(val) {
				return moment(val * 1000).format('YYYY-MM-DD')
			},
			//转成星期几
			week(val){
				var date=moment(val * 1000).format('YYYY-MM-DD');
				let datelist = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]
				return datelist[new Date(date).getDay()];
				
			},
			//转整
			toInt(val) {
				return helper.toInt(val);
			},
			//百分比
			toPercent(val) {
				return helper.toPercent(val);
			},
			state2text(state){
				state = parseInt(state);
				switch (state){
					case 0:
						return "待审核";
						break;
					case 1:
						return "已通过";
						break;
					case 3:
						return "已驳回";
						break;
					default:
						return "未知状态";
						break;
				}
			}
		},
		methods: {
			_getData: function() {
				var that = this;
				if(this.start_date || this.end_date){
					this.param.start_time=this.start_date;
					this.param.end_time=this.end_date;
				};
				var args = {
					page: this.$data.page,
					num: this.page_size,
					'per-page':this.page_size,
					...this.param,
					expand:'member'
				};
				this.$data.loadStatus = 'loading';

				this.$http.get(`${orderLog}`, args)
					.then(async res => {
					uni.hideLoading();
					if (res.code == 200) {
						if (that.$data.page == 1) {
							that.$data.items = [];
						}
						var resData = res.data.itmes;
						console.log(resData);
						var items = that.$data.listData.concat(resData);
						that.$data.listData = items;
						that.total_score = res.data.total_score;
						that.total_price = res.data.total_price;
						//隐藏正在加载中
						that.$data.hiddenLoading = true;
						
						if (resData.length < that.page_size) {
							that.$data.loadStatus = 'noMore'
						} else {
							that.$data.loadStatus = 'more'
						}
					} else {
						uni.showToast({
							title: res.errmsg ? res.errmsg : '获取数据失败！',
							icon: 'none'
						})
					}

				});
			},
			showExam(item,index){
				this.$refs.pass.open(item);
				this.index = index;
			},
			exam(e){
				this.$set(this.listData,this.index,e);
			},
			onReachBottom: function() {
				if (this.$data.loadStatus == 'noMore') {
					return false;
				}
				this.$data.page++;
				this._getData();
			},
			//
			search(){
				this.page=1;
				this.listData=[];
				this.total_num = 0;
				this.total_price = 0;
				this.loadStatus='more';
				this._getData();
				this.show_sort=false;
			},
			//
			showSort(){
				this.show_sort=true;
			},
			//
			closeSort(){
				this.show_sort=false;
			},
			//
			selectState(index, status) {
				this.stateIndex= index;
				this.param.state = status;
				this.$data.listData = [];
				this.total_num = 0;
				this.total_price = 0;
				this._getData();
			},
			//
			resetData() {
				this.param = {
					status: '',
					type: '',
					date: '',
					name: ''
				};
				this.sort_status_index = '';
				this.sort_type_index = '';
				this.end_date = this.getDate({
					format: true
				});
				this.start_date = this.getDate({
					format: true
				});
			},
			submitData(){
				this.show_sort=false;
				this.page=1;
				this.listData=[];
				this.loadStatus='more';
				this._getData();
			},
			//
			resetTime(type){
				if(type=='start'){
					this.start_date='';
				}else{
					this.end_date='';
				}
			},
			bindPickerChange: function(e) {
				this.$data.currentTpye = e.detail.value;
			},
			startDateChange: function(e) {
				this.start_date = e.detail.value
			},
			endDateChange: function(e) {
				this.end_date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
	}
</script>

<style lang="scss">
	.search-box {
		width: 100%;
		margin: 0rpx auto;
		padding: 30rpx 10rpx 0;
		margin-bottom: 40rpx;
		align-items: center;
		justify-content: space-between;
		display: flex;
		// position: fixed;
		// top: 0;
		// z-index: 98;
		background-color: #fff;
	}

	.search-input {
		width: calc(100% - 180rpx - 40rpx);
		border: 1px solid #ececec;
		padding: 15rpx;
		margin-right: 20rpx;
	}

	.search-btn,
	.sort-btn {
		background-color: #ff9900;
		padding: 20rpx 0;
		font-size: 28rpx;
		width: 180rpx;
		text-align: center;
		border-radius: 10rpx;
		margin: 0 10rpx;
	}

	.reset-btn {
		background-color: #ff5500;
		color: #fff;
	}
	.reset-time-btn {
		// background-color: #ff6600;
		border: 2rpx solid #ff6600 !important;
		color: #ff6600;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		border-radius: 10rpx;
	}

	.sort-btn {
		background-color: #00aaff !important;
		color: #fff !important;
	}

	.top-total-box {
		font-size: 32rpx;
		padding: 20rpx;
		line-height: 40rpx;
		font-weight: bold;
	}

	.sort-box {
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		width: 100%;
		height: 500rpx;
		font-size: 28rpx;
	}
	.out-sort-box{
		font-size: 28rpx;
		background-color: #fff;
		padding: 0 0 20rpx;
		position: fixed;
		top: 0;
		z-index: 8;
		width: 100%;
	}
	.out-sort-box .sort-item{
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
	}
	.out-sort-box .sort-item view{
		width: 25%;
		text-align: center;
		padding: 20rpx 0;
	}
	.out-sort-box .select-item-active{
		background-color: #fff !important;
		color: #ff6600 !important;
		border: none !important;
		border-bottom:6rpx solid #ff6600 !important;
	}
	.out-sort-box .sort-time{
		padding: 0 30rpx;
	}

	.sort-box .sort-list,.out-sort-box .sort-list {
		padding: 0 30rpx;
	}

	.sort-box .sort-title,.out-sort-box .sort-title {
		font-size: 30rpx;
		margin: 20rpx 0;
	}

	.sort-box .sort-item view{
		padding: 15rpx 25rpx;
		border: 2rpx solid #b6b6b6;
		margin: 20rpx 20rpx 20rpx 0;
		border-radius: 30rpx;
	}

	.sort-time-start,
	.sort-time-end {
		display: flex;
		align-items: center;
	}

	.sort-time-start picker,
	.sort-time-end picker {
		margin: 20rpx 20rpx 15rpx;
		border: 2rpx solid #eaeaea;
		padding: 20rpx;
		width: 300rpx;
		border-radius: 6rpx;
		height: 30rpx;
		line-height: 30rpx;
	}

	.select-item-active {
		// background-color: #00aa00;
		color: #00aa00;
		border: 2rpx solid #07c160 !important;
	}
	.submit-btn{
		background-color: #00aa00;
		color: #fff;
	}

	.sort-footer {
		display: flex;
		justify-content: space-around;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.sort-footer view {
		width: 50%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.flex-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.bd .item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-bottom: 1px solid #ececec;
	}

	.bd .item .item-l .tit {
		font-weight: 500;
		margin-bottom: 20rpx;
		font-size: $uni-font-size-base + 2rpx;
	}

	.bd .item .item-l .time {
		font-size: 24rpx;
		color: #999;
	}

	.bd .item .item-r {
		padding-left: 30rpx;
		font-size: $uni-font-size-lg;
		font-weight: 600;
		text-align: center;
	}

	.green {
		color: #07c160;
	}

	.red {
		color: #333;
	}

	.picker {
		text-align: center;
		background-color: #fff;
		padding: 20rpx 0 40rpx 0;
		border-bottom: 1px solid #f9f9f9;
	}

	.type-txt {
		font-size: 26rpx;
		padding-bottom: 20rpx;
	}
	.pass{width: 200rpx;text-align: center;background-color: #00aa00;color: #fff;border-radius: 60rpx;padding: 10rpx 0;font-weight: normal;margin-top: 20rpx;}
</style>
